<!--
 * @Author: 九璃怀特 1599130621@qq.com
 * @Date: 2023-12-25 09:01:09
 * @LastEditors: 九璃怀特 1599130621@qq.com
 * @LastEditTime: 2023-12-29 17:00:29
 * @FilePath: \zxi-surface-manual\src\components\BaseMenu\BaseMenu.vue
 * @Description: 
 -->
<script setup lang="ts">
import { computed, onMounted, reactive } from "vue";
import Group from "./group.vue";
import { defaultLists } from "./default.json";
import { iVideoItem } from "~/BaseFrame";

const naviGationLists = reactive<{
  [key: string]: { title: string; value: Array<iVideoItem> };
}>({
  ANY: {
    // title: "基础使用",
    title: "外观与主界面介绍",
    value: [],
  },
  APP: {
    title: "场景应用",
    value: [],
  },
  RX: {
    title: "基本功能",
    value: [],
  },
  OP: {
    title: "专项功能",
    value: [],
  },
  DF: {
    title: "测向",
    value: [],
  },
  AS: {
    title: "数据分析",
    value: [],
  },
});

// 获取已有视频key
const FileVideos = Object.entries(
  import.meta.glob<{ default: any }>("public/videos/*.mp4", { eager: true })
).map(([key]) => key.slice(15, -4));

function buildNavGationList() {
  const videoList = defaultLists.filter((e) =>
    FileVideos.includes(e.functionKey)
  );
  videoList.forEach(async (e) => {
    const item = {
      imgUrl: `images/${e.functionKey}.png`,
      videoUrl: `videos/${e.functionKey}.mp4`,
      name: e.name,
      functionKey: e.functionKey,
      title: e.description,
    };
    const target = naviGationLists[e.subjectionKey];
    if (target) {
      target.value.push(item);
    }
  });
}

const rGroupWidth = computed(() => {
  return naviGationLists.DF.value.length ? "36rem" : "20rem";
});

onMounted(() => {
  buildNavGationList();
});

const groups = computed(() => {
  return Object.keys(naviGationLists).map((e) => {
    return naviGationLists[e];
  });
});

const getGroups = (
  ...keys: Array<"ANY" | "APP" | "RX" | "OP" | "DF" | "AS">
) => {
  if (!keys.length) {
    return groups.value;
  }
  return keys.map((e) => {
    return naviGationLists[e];
  });
};
</script>

<template>
  <div class="BaseMenu">
    <!-- <PmScroll
      :scrollbar="null"
      :wrapperStyle="{ backgroundColor: 'transparent' }"
    >
      <div>
        <template v-for="item in groups">
          <Group
            v-if="item.value.length"
            :title="item.title"
            :data="item.value"
          ></Group>
        </template>
      </div>
    </PmScroll> -->
    <div class="default-menu">
      <PmScroll
        :scrollbar="null"
        :wrapperStyle="{ backgroundColor: 'transparent' }"
      >
        <div class="groups">
          <template v-for="item in getGroups('ANY', 'APP', 'OP', 'AS')">
            <Group
              v-if="item.value.length"
              :title="item.title"
              :data="item.value"
            ></Group>
          </template>
        </div>
      </PmScroll>
      <PmScroll
        :scrollbar="null"
        :wrapperStyle="{ backgroundColor: 'transparent' }"
      >
        <div class="groups">
          <template v-for="item in getGroups('RX', 'DF')">
            <Group
              v-if="item.value.length"
              :title="item.title"
              :data="item.value"
            ></Group>
          </template>
        </div>
      </PmScroll>
    </div>
    <div class="min-menu">
      <PmScroll
        :scrollbar="null"
        :wrapperStyle="{ backgroundColor: 'transparent' }"
      >
        <div class="groups">
          <template v-for="item in groups">
            <Group
              v-if="item.value.length"
              :title="item.title"
              :data="item.value"
            ></Group>
          </template>
        </div>
      </PmScroll>
    </div>
  </div>
</template>

<style lang="less" scoped>
.BaseMenu {
  // min-width: 36rem;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 99;
  // background-color: var(--pm-el-background-color);
  .groups {
    display: grid;
    gap: 1rem;
  }
  .default-menu {
    width: 100%;
    height: 100%;
    display: grid;
    box-sizing: border-box;
    gap: 1rem;
    padding: 0.5rem;
    grid-template-columns: 1fr v-bind("rGroupWidth");
  }
  .min-menu {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: none;
  }
  @media screen and (max-width: 833px) {
    .default-menu {
      display: none;
    }
    .min-menu {
      display: block;
    }
  }
}
</style>
